/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-06-01 09:21:03
 * @LastEditTime : 2023-06-29 10:57:58
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Router\MenuNav\DiyList\Theme\HeaderUserInfo.jsx
 * @Description  :
 */
import '../Scss/HeaderUserInfo.scss'
import { UserOutlined, BellOutlined, LogoutOutlined } from '@ant-design/icons'
import { useLocalStorageState, useSessionStorageState } from 'ahooks'
import { Avatar, Dropdown, message } from 'antd'
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

export const triggerList = [
    { label: '鼠标点击', value: 'click' },
    { label: '鼠标划上', value: 'hover' },
]

export const userInfoButtonList = OptionsEvent => ({
    '001': {
        uuid: '001',
        label: (
            <div onClick={() => OptionsEvent.emit({ type: 'ModifyPassWord', data: { title: '修改密码', width: 600 } })}>
                修改密码
            </div>
        ),
        content: '修改当前用户密码',
        isEnabled: false,
        icon: <BellOutlined />,
    },
    '002': {
        uuid: '002',
        label: (() => {
            const Button002 = () => {
                const [messageApi, contextHolder] = message.useMessage()
                return (
                    <>
                        {contextHolder}
                        <div onClick={() => messageApi.info('功能开发中')}>个人中心</div>
                    </>
                )
            }
            return <Button002 />
        })(),
        content: '功能开发中',
        isEnabled: false,
        icon: <UserOutlined />,
    },
    '003': {
        uuid: '003',
        label: (() => {
            const Button003 = () => {
                const [messageApi, contextHolder] = message.useMessage()
                return (
                    <>
                        {contextHolder}
                        <div onClick={() => messageApi.info('测试用菜单')}>测试菜单</div>
                    </>
                )
            }
            return <Button003 />
        })(),
        content: '测试用菜单',
        isEnabled: false,
        icon: <LogoutOutlined />,
    },
    '004': {
        uuid: '004',
        label: (() => {
            const Button004 = () => {
                const Navigate = useNavigate()
                return <div onClick={() => Navigate('/')}>退出登录</div>
            }
            return <Button004 />
        })(),
        content: '退出到登录页面',
        isEnabled: false,
        icon: <LogoutOutlined />,
        danger: true,
    },
})

export const HeaderUserInfo = ({ OptionsEvent, data }) => {
    const [UserInfo] = useSessionStorageState('UserInfo')
    const [ClientData] = useLocalStorageState('ClientData')
    const { type, trigger, list } = data
    const Template = HeaderUserInfoList[type]
    const { userName, userRoles } = UserInfo
    const [roleUuid] = userRoles
    const { role } = ClientData
    const [Items, setItems] = useState([])
    useEffect(() => {
        const newObj = list.map(item => {
            const { isEnabled, ...data } = userInfoButtonList(OptionsEvent)[item]
            return { ...data }
        })
        setItems(newObj)
    }, [OptionsEvent, list])
    return <Template user={userName} role={role[roleUuid]} trigger={trigger} items={Items} />
}

const HeaderUserInfo001 = ({ user, role, trigger, items }) => {
    return (
        <Dropdown trigger={[trigger]} placement="bottomRight" menu={{ items }}>
            <div className="HeaderUserInfo001">
                <Avatar size={40} icon={<UserOutlined />} />
                <div>
                    <div>{user}</div>
                    <div>{role}</div>
                </div>
            </div>
        </Dropdown>
    )
}

const HeaderUserInfo002 = ({ user, role, trigger, items }) => {
    return (
        <Dropdown trigger={[trigger]} placement="bottomRight" menu={{ items }}>
            <div className="HeaderUserInfo002">
                <Avatar size={32} icon={<UserOutlined />} />
                <div>
                    {role} {user}
                </div>
            </div>
        </Dropdown>
    )
}

export const HeaderUserInfoList = {
    '001': HeaderUserInfo001,
    '002': HeaderUserInfo002,
}
